<!DOCTYPE html>
<html style="font-size: 100px">
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<!-- <meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection"/> -->
		<meta name="format-detection" content="telephone=yes"/>


		<!-- <link href="/css/user.css" rel="stylesheet" type="text/css"/> -->
		<link href="./user.css" rel="stylesheet" type="text/css"/>
		<style type="text/css">
			.icon {
				 width: 1em; height: 1em;
				 vertical-align: -0.15em;
				 fill: currentColor;
				 overflow: hidden;
			}


			.scroll{
			position:absolute; 
			overflow:scroll; 
			-webkit-overflow-scrolling: touch; 
			top:0; 
			left:0; 
			bottom:0; 
			right:0;
		}

	</style>
	</head>
	<body style="font-size: 16px;">
		<div class="scroll">

		<div class="topbtn">
				<div class="icon-cont">
						<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-duihua"></use>
						</svg>
				</div>
				<div class="icon-cont" onclick="window.location.href = './edituser.html'">
						<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-config"></use>
						</svg>
				</div>
		</div>
		<div class="container">
				<div class="user-section">
					<img class="bg" src="./img/user-bg.jpg"></img>
					<div class="user-info-box">
						<div class="portrait-box" onclick="window.location.href = './edituser.html'">
							<!-- <img class="portrait" :src="userInfo.userIcon || './img/missing-face.png'"></img> -->
							<img class="portrait" src="./img/missing-face.png"></img>
						</div>	
						<div class="info-box">
							<span class="username">游客</span>
						</div>
					</div>
					<div class="vip-card-box">
						<img class="card-bg" src="./img/vip-card-bg.png" mode=""></img>
						<div class="b-btn" @click="test()">
							申请直销商
						</div>
						<div class="tit">
							<svg class="icon" aria-hidden="true">
									<use xlink:href="#icon-huiyuan"></use>
							</svg>
							金牌会员
						</div>
						<span class="e-m"></span>
						<span class="e-b"></span>
					</div>
				</div>
				
				<div class="cover-container"
						ontouchstart="coverTouchstart(event)"
						ontouchmove="coverTouchmove(event)"
						ontouchend="coverTouchend(event)" >
				
					<img class="arc" src="./img/arc.png"></img>
					
					<div class="tj-sction">
						<div class="tj-item" onclick="window.location.href = '../integral/integral.html'" >
							<span class="num">700</span>
							<span>总积分</span>
						</div>
						<div class="tj-item" @click="navTo('/pages/cardORcoupon/index')">
							<span class="num">200</span>
							<span>我的积分</span>
						</div>
						<div class="tj-item">
							<span class="num">500</span>
							<span>渠道积分</span>
						</div>
						<div class="tj-item">
							<span class="num">75</span>
							<span>总送酒量</span>
						</div>
					</div>
				
					<div class="history-section">
						<div class="link-list">
							<div class="link-item"> 
								<div class="left">
									<div class="icon-cont0">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-phone"></use>
											</svg>
									</div>
									<a href="tel:4008-038-908">我的钱包</a>	
								</div>
								<div class="right">
									<div class="icon-cont1">
											$300.00
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-qianjin"></use>
											</svg>
									</div>
								</div>
							</div>
							<div class="link-item"> 
								<div class="left">
									<div class="icon-cont0">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-phone"></use>
											</svg>
									</div>
									<a href="tel:4008-038-908">我的下级</a>	
								</div>
								<div class="right">
									<div class="icon-cont1">
											120人
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-qianjin"></use>
											</svg>
									</div>
								</div>
							</div>
							<div class="link-item" onclick="window.location.href='../shareScan/shareScan.html'"> 
								<div class="left">
									<div class="icon-cont0">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-phone"></use>
											</svg>
									</div>
									<a>分享</a>	
								</div>
								<div class="right">
									<div class="icon-cont1">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-qianjin"></use>
											</svg>
									</div>
								</div>
							</div>
							<div class="link-item"> 
								<div class="left">
									<div class="icon-cont0">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-phone"></use>
											</svg>
									</div>
									<a href="tel:4008-038-908">设置</a>	
								</div>
								<div class="right">
									<div class="icon-cont1">
											<svg class="icon" aria-hidden="true">
													<use xlink:href="#icon-qianjin"></use>
											</svg>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</div>


				<!-- icon -->
				<script src="http://at.alicdn.com/t/font_1341036_l1c94acy289.js"></script>
				<script>
					// 禁止下拉
					var overscroll = function(el) {
					el.addEventListener('touchstart', function() {
						var top = el.scrollTop
							, totalScroll = el.scrollHeight
							, currentScroll = top + el.offsetHeight
						//If we're at the top or the bottom of the containers
						//scroll, push up or down one pixel.
						//
						//this prevents the scroll from "passing through" to
						//the body.
						if(top === 0) {
							el.scrollTop = 1
						} else if(currentScroll === totalScroll) {
							el.scrollTop = top - 1
						}
					})
					el.addEventListener('touchmove', function(evt) {
							//if the content is actually scrollable, i.e. the content is long enough
							//that scrolling can occur
							if(el.offsetHeight < el.scrollHeight)
								evt._isScroller = true
						})
					}
					overscroll(document.querySelector('.scroll'));
					document.body.addEventListener('touchmove', function(evt) {
						//In this case, the default behavior is scrolling the body, which
						//would result in an overflow.  Since we don't want that, we preventDefault.
						if(!evt._isScroller) {
							evt.preventDefault()
						}
					})


					let startY = 0
					let moveY = 0
					let moving= false
					let pageAtTop = true;
					let coverC = document.querySelector('.cover-container')
					function coverTouchstart(e){
						if(pageAtTop === false){
							return;
						}
						
						// this.coverTransition = 'transform .1s linear';
						coverC.style.transition = 'transform .1s linear';
						startY = e.touches[0].clientY;
					}

					function	coverTouchmove(e){
						moveY = e.touches[0].clientY;
						let moveDistance = moveY - startY;
						if(moveDistance < 0){
							moving = false;
							return;
						}
						moving = true;
						if(moveDistance >= 80 && moveDistance < 100){
							moveDistance = 80;
						}
				
						if(moveDistance > 0 && moveDistance <= 80){
							coverC.style.transform = `translateY(${moveDistance}px)`;
						}
					}

				  function	coverTouchend(){
						if(moving === false){
							return;
						}
						moving = false;
						coverC.style.transition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
						coverC.style.transform = 'translateY(0px)';
					}
				</script>  
	</body>
</html>
